<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        button {
            width: 100px;
            height: 50px;
            padding: 5px;
            margin: 5px;
        }

        #app {
            position: relative;
            width: 500px;
            height: 500px;
            border: 20px solid green;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div id="app">

</div>
</body>
<script>
    // 实现的目标：
    // 1- 可以出现指定的30个小球
    // 2- 小球出现的位置不同。(完成）
    // 3- 小球的背景颜色不同。(完成）
    // 4- 小球移动的速度不同。
    // 5- 小球移动的大小不同。(完成）
    const app = document.querySelector("#app");
    const ballNum = 20;// 指定小球的数量
    for (let i = 0; i < ballNum; i++) {
        const wh = randomNum(20,60);// 小球的宽高。
        const maxX = app.clientWidth - wh;// 获取向右移动的最大值
        const maxY = app.clientHeight - wh;// 获取向下移动的最大值
        const leftX = randomNum(0,maxX);// 随机
        const topY = randomNum(0,maxY);// 随机
        const speedX = randomNum(1,20);
        const speedY = randomNum(1,20);
        app.innerHTML += `
            <div data-w="${maxX}" data-h="${maxY}" data-x="${speedX}" data-y="${speedY}" style="position:absolute;border-radius:100%;left:${leftX}px;top:${topY}px;background:rgb(${randomNum(1,255)},${randomNum(1,255)},${randomNum(1,255)});width:${wh}px;height:${wh}px;"></div>
        `
    }
    setInterval(function(){
        const balls = app.querySelectorAll("div");
        balls.forEach(ball=>{

            const topNum = ball.style.top.replace("px","")/1;// 获取当前元素的top
            const leftNum = ball.style.left.replace("px","")/1;// 获取当前元素的left

            const maxX = ball.dataset.w/1;// 横向移动的最大值
            const maxY = ball.dataset.h/1;// 纵向移动的最大值
            const speedX = ball.dataset.x/1;// 水平移动的距离
            const speedY = ball.dataset.y/1;// 垂直移动的距离
            // // 最终指定的left
            let leftX = leftNum+speedX;
            // // 最终指定的top
            let topY = topNum+speedY;
            // console.log(leftX,topY)
            // // 是否超过最大的纵向位置
            if(topY>maxY){
                ball.dataset.y = speedY*-1;
                topY= maxY;
            }else if(topY<0){
                topY=0;
                ball.dataset.y = speedY*-1;
            }

            if(leftX>maxX){
                ball.dataset.x = speedX*-1;
                leftX= maxX;
            }else if(leftX<0){
                leftX=0;
                ball.dataset.x = speedX*-1;
            }

            ball.style.top = topY+"px";
            ball.style.left = leftX+ "px"





        })

    },50)
    // 获取指定范围内的数字
    function randomNum(min,max){
        return Math.floor(Math.random()*(max-min+1)+min);
    }
</script>
</html>